<template>
  <d-config-provider>
    <div>
      <d-menu :selectedKeys="value" mode="horizontal">
        <d-menu-item key="mail">
          <d-icon type="mail" />Navigation One
        </d-menu-item>
        <d-menu-item key="app" disabled>
          <d-icon type="appstore" />Navigation Two
        </d-menu-item>
        <d-sub-menu>
          <span slot="title">
            <d-icon type="setting" />Navigation Three - Submenu
          </span>
          <d-menu-item-group title="Item 1">
            <d-menu-item key="setting:1">
              Option 1
            </d-menu-item>
            <d-menu-item key="setting:2">
              Option 2
            </d-menu-item>
          </d-menu-item-group>
          <d-menu-item-group title="Item 2">
            <d-menu-item key="setting:3">
              Option 3
            </d-menu-item>
            <d-menu-item key="setting:4">
              Option 4
            </d-menu-item>
          </d-menu-item-group>
        </d-sub-menu>
        <d-menu-item key="alipay">
          <a href="https://antdv.com" target="_blank" rel="noopener noreferrer">
            Navigation Four - Link
          </a>
        </d-menu-item>
      </d-menu>

      <d-divider />

      <d-menu :items="items" itemKey="name" @click="handleAction">
        <template slot="item" slot-scope="item">
          {{ item.name }}
        </template>
      </d-menu>
    </div>
  </d-config-provider>
</template>

<script>
export default {
  data() {
    return {
      value: ['mail'],
      items: [{ name: '编辑信息' }, { name: '更新信息' }]
    };
  },
  methods: {
    handleAction({ key }) {
      console.log(key);
    }
  }
};
</script>

<style lang="scss" scoped></style>
